<!DOCTYPE html>
<html>
	<head>
	
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>FocusPoint Example</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		
		<link rel="stylesheet" type="text/css" href="../../css/focuspoint.css">
		<link rel="stylesheet" type="text/css" href="../demo.css">
		<link rel="stylesheet" type="text/css" href="comparison.css">
		
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.focuspoint.js"></script>
		
		<script type="text/javascript">
		//<![CDATA[	
			
			(function($) {
				$(document).ready(function() {
					
					//Activate focus points
					$('.focuspoint').focusPoint();
					
				});
			}(jQuery));
		
		//]]>
		</script>
		
	</head>
	<body>
		
		<div id="Frames">
	
			<div id="Frame1" class="focuspoint"
			data-focus-x="0.29"
			data-focus-y="-0.284"
			data-image-w="667"
			data-image-h="1000">
				<img src="../img/bird.jpg" alt="" />
			</div>
		
			<div id="Frame2">
			</div>
					
		</div>
		
		<div id="Info">
			<div id="Original">
				<img src="../img/bird.jpg" alt="" />
				<h4><span>Original</span></h4>
			</div>
			<p><b>Try resizing the window.</b> Watch how the frames change to use all of 
			the available space while preserving the focus of the image.
			The left frame uses FocusPoint to control the crop, while the right frame uses only CSS.
			<a href="https://github.com/jonom/jquery-focuspoint">»&nbsp;Project&nbsp;Home</a></p>
		</div>
	
	</body>
</html>
